<template>
	<hx-navbar title="退款详情"></hx-navbar>
	<view v-if="!loading" class="refunds-detail-container">
		<!-- 退款明细 -->
		<view class="refunds-detail-status">
			<view>
				<view class="status-title">
					<view style="padding-left: 10rpx">{{ getStatusInfo(state.refunds.status).title }}</view>
				</view>
				<view class="status-desc">{{ getStatusInfo(state.refunds.status).desc }}</view>
			</view>
		</view>
		<!-- 退款明细 -->
		<view class="refunds-detail-warp">
			<view class="refunds-detail-info">
				<view> 退款金额 </view>
				<view class="text-price" style="color: red">
					{{ state.refunds.refundAmount }}
				</view>
			</view>
		</view>
		<view class="refunds-detail-content" v-if="state.refunds.orderItem">
			<view class="refunds-goods">
				<image :src="state.refunds.orderItem.picUrl" />
				<view class="right">
					<view class="goods-title u-line-2"> {{ state.refunds.orderItem.spuName }} </view>
					<view class="goods-spec" v-if="state.refunds.specsInfo">{{ state.refunds.specsInfo }}</view>
					<view class="goods-price">
						<view class="goods-quantity">申请数量：{{ state.refunds.orderItem.buyQuantity }} </view>
						<view class="text-price" style="color: red"> {{ state.refunds.refundAmount }} </view>
					</view>
				</view>
			</view>
			<u-line />
			<view class="refunds-bar">
				<view class="title"> 退款类型 </view>
				<view>
					{{ state.refunds.refundType === '1' ? '仅退款' : '退货退款' }}
				</view>
			</view>
			<view class="refunds-bar">
				<view class="title"> 申请时间 </view>
				<view>
					{{ state.refunds.createTime }}
				</view>
			</view>
			<view class="refunds-bar">
				<view class="title"> 申请原因 </view>
				<view>
					{{ state.refunds.refundReason }}
				</view>
			</view>
			<view class="refunds-bar">
				<view class="title"> 退款方式 </view>
				<view> 原支付返还 </view>
			</view>
			<view class="refunds-bar">
				<view class="title"> 驳回原因 </view>
				<view>
					{{ state.refunds.refuseReason }}
				</view>
			</view>
			<view class="refunds-bar" v-if="state.refunds.status == '11' || state.refunds.status == '12'">
				<view class="title"> 退款入账账户 </view>
				<view> {{ state.refunds.userReceivedAccount }} </view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { getById } from '@/api/order/orderRefunds';
import { reactive, ref } from 'vue';
const stepCurrent = ref(1);
const loading = ref(false);
const numList = ref([
	{
		name: '提交申请',
	},
	{
		name: '商家处理中',
	},
	{
		name: '完成',
	},
]);
const state = reactive<{ refunds: any }>({
	refunds: {},
});
onLoad((options) => {
	getDetail(options?.id);
});
const getDetail = (id: string) => {
	loading.value = true;
	getById(id).then((response) => {
		loading.value = false;
		state.refunds = response.data;
		if (state.refunds.status == '1' || state.refunds.status == '2') {
			stepCurrent.value = 1;
		} else {
			stepCurrent.value = 2;
		}
	});
};
const getStatusInfo = (status: string) => {
	const statusMap = {
		'1': { icon: 'money-circle', title: '售后申请中', desc: '请等待商家处理' },
		'6': { icon: 'check-outline', title: '退款成功', desc: '退款已完成，资金将原路返回' },
		'8': { icon: 'close-outline', title: '退款失败', desc: '退款失败，请联系商家处理' },
		'9': { icon: 'close-outline', title: '退款已关闭', desc: '退款已关闭，退款申请已被拒绝' }
	};
	return statusMap[status] || { icon: 'money-circle', title: '处理中', desc: '请等待' };
};
</script>

<style lang="scss">
.refunds-detail-container {

	.refunds-detail-warp {
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		margin: 20rpx;

		.refunds-detail-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}


	.refunds-detail-status {
		height: 200rpx;
		padding: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #4d80f0;
		color: #fff;

		.status-title {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 700;
		}

		.status-desc {
			text-align: center;
			padding-top: 20rpx;
			font-size: 24rpx;
		}
	}

	.refunds-detail-content {
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.refunds-goods {
			display: flex;
			padding: 20rpx 0;

			image {
				width: 160rpx;
				flex: 0 0 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
			}

			.right {
				flex: 1 0 0%;
				height: 100%;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.goods-title {
					font-size: 28rpx;
				}

				.goods-spec {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #909090;
				}

				.goods-price {
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		.refunds-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			.title {
				color: #909399;
			}
		}
	}
}
</style>
